<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="/back/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="/back/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>

    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>

    <!-- 引入store -->
    <script type="text/javascript" src="/commons/js/store.js"></script>

    <script>
      $(function () {
        queryLanguageList();
      })

      //查询语言列表
      function queryLanguageList(){
          myajax({
            url: "/api/language/list",
            success: function (data) {
              var bodys = "";
              data.forEach(function (item, index) {
                var content = "";
                bodys += "<li className='item dark-black d-flex align-items-center gap-8' onclick='selectLanguage(" + item.id + ", this)'>";
                content += "<img style='width: 18px; height: 12px; margin-right: 5px' src='/api/file/get?filename=" + item.languageFlag + "' alt=''>";
                content += item.languageName;
                bodys += content;
                bodys += "</li>";

                if(index == 0) {
                  $("#destination2").html(content);
                  //默认选中第一个
                  loadLanguageData(item.id);
                }
              });

              //加入select
              $("#languageSelectId").html(bodys);


            }
          });
      }

      //选择语言
      function selectLanguage(id, ele){
        $("#destination2").html($(ele).html());

        loadLanguageData(id);
      }

      //请求相关语言数据
      function loadLanguageData(id) {
        //查询相关的常量列表
        myajax({
          url: "/api/sys/data/config/list",
          data: {
            languageId: id
          },
          success: (data) => {
            //存储数据
            saveData("langueages", data);

            //刷新页面
            loadPageData();
          }
        });
      }


      //刷新整个页面的占位符
      function loadPageData() {
        //获取语言数据
        var replacements = getAllData("langueages");
        console.log(replacements);

        // 获取所有元素
        const elements = document.querySelectorAll('*');

        elements.forEach(element => {
          // 检查当前元素是否包含 lg 属性
          if (element.hasAttribute('lg')) {
            const key = element.getAttribute('lg'); // 获取 lg 属性的值
            // 如果替换对象中存在对应的 key，则替换文本内容
            if (replacements[key]) {
              element.innerHTML = replacements[key];
            } else {
              element.innerHTML = "{{" + key + "}}";
            }
          }
        });
      }

    </script>
</head>
<body>
<!-- Header Menu Start -->
<header>
  <!-- Main Header Start -->
  <div class="header-section bg-white dark-black main-menu">
    <div class="container-fluid">
      <div class="header-top">
        <div class="row">
          <div class="col-lg-3 col-md-6 col-6">
            <a href="contact.html" class="top-bar-links text-16 medium d-flex align-items-center gap-2">
              <i class="fa-regular fa-phone"></i>
              <span>(323) 576-1942</span>
            </a>
          </div>
          <div class="col-lg-6 col-md-6 d-lg-block d-none text-center">
            <p><span class="text-16 semibold"> Black Friday Sale:</span> Save up to 60% with code
              <span class="text-16 semibold">PowerUp.</span></p>
          </div>
          <div class="col-lg-3 col-md-6 col-6 header-end">
            <div class="drop-container">
              <div class="wrapper-dropdown dark-black" id="dropdown2">
                <span class="selected-display d-inline-flex align-items-center gap-8" id="destination2">
                    <img src="/forword/picture/usd.png" alt="">
                    USD
                </span>
                <svg id="drp-arrow2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="arrow transition-all ml-auto rotate-180">
                  <path d="M7 14.5l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <ul class="topbar-dropdown bg-lightest-gray" id="languageSelectId">
                  <li class="item dark-black d-flex align-items-center gap-8">
                    <img src="/forword/picture/usd.png" alt="">
                    USD
                  </li>
                  <li class="item dark-black d-flex align-items-center gap-8">
                    <img src="/forword/picture/aed.png" alt="">
                    AED
                  </li>
                  <li class="item dark-black d-flex align-items-center gap-8">
                    <img src="/forword/picture/lb.png" alt="">
                    LB
                  </li>
                  <li class="item dark-black d-flex align-items-center gap-8">
                    <img src="/forword/picture/dem.png" alt="">
                    DEM
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-bottom-area bg-light-black">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-xl-3 col-md-6 col-4">
            <a href="" class="header-logo">
              <img src="/forword/picture/logo.png" alt="">
            </a>
          </div>
          <div class="col-xl-6 d-xl-block d-none">
            <nav class="navigation d-flex align-items-center justify-content-center">
              <div class="menu-button-right">
                <div class="main-menu__nav">
                  <ul class="main-menu__list">
                    <li>
                      <a href="" class="active"><a lg="tab1"></a></a>
                    </li>
                    <li class="dropdown">
                      <a href="javascript:void(0);">Shop <i class="fa-light fa-chevron-down d-lg-block d-none"></i></a>
                      <ul class="sub-menu">
                        <li><a href="shop-grid.html">Shop Grid</a></li>
                        <li><a href="shop-grid-sidebar.html">Shop Grid Sidebar</a>
                        </li>
                        <li><a href="product-detail.html">Product Detail</a></li>
                      </ul>
                    </li>
                    <li>
                      <a href="about.html">About Us</a>
                    </li>
                    <li class="dropdown">
                      <a href="javascript:void(0);">Blogs <i class="fa-light fa-chevron-down d-lg-block d-none"></i></a>
                      <ul>
                        <li><a href="blog-grid.html">Blog Grid</a></li>
                        <li><a href="blog-grid-sidebar.html">Blog Grid Sidebar</a></li>
                        <li><a href="blog-detail.html">Blog Detail</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a href="javascript:void(0);">Pages <i class="fa-light fa-chevron-down d-lg-block d-none"></i></a>
                      <ul class="sub-menu">
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="404.html">404</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </div>
          <div class="col-xl-3 col-md-6 col-8">
            <div class="header-buttons">
              <div class="logo-icon d-sm-block d-none">
                <form action="index.html">
                  <div class="search-block">
                    <input type="search" class="input-search form-control" name="search" id="search" placeholder="Search...">
                    <a href="javascript:;" id="magnifying-btn"><i class="fa-light fa-magnifying-glass"></i></a>
                  </div>
                </form>
              </div>
              <a href="contact.html" class="account-btn">
                <i class="fa-light fa-user"></i>
              </a>
              <a href="javascript:;" class="cart-button">
                <i class="fa-light fa-cart-shopping"></i>
              </a>
              <a href="#" class="main-menu__toggler mobile-nav__toggler">
                Menu
                <img src="/forword/picture/menu-2.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Main Header End -->
  <!-- Sticky Header Start-->
  <div class="stricky-header stricked-menu main-menu">
    <div class="sticky-header__content"></div>
  </div>
  <!-- Sticky Header End  -->
</header>
<!-- Header Menu End -->
</body>
</html>